<!-- 控件创建表单 -->
<template>
  <a-modal
    v-model:visible="visible"
    class="form-modal"
    fullscreen
    :footer="false"
    :closable="false"
    :esc-to-close="false"
  >
    <div class="header">
      <a-input v-model="formData.name" :style="{ width: '230px' }" />
      <icon-edit size="24" />
      <a-menu
        class="menu"
        mode="horizontal"
        :default-selected-keys="['horizontal']"
        @menu-item-click="menuItemClick($event)"
      >
        <a-menu-item key="horizontal">表单设计</a-menu-item>
        <a-menu-item key="vertical">表单预览</a-menu-item>
      </a-menu>
      <a-space>
        <a-button @click="chagangetest(2)" type="primary">保存</a-button>
        <a-button @click="goBack" type="outline">返回</a-button>
      </a-space>
    </div>
    <div class="content">
      <div class="main">
        <!-- 表单设计 -->
        <div v-show="menuSelected === 'horizontal'">
          <setUPForm
            v-model:layout="rest"
            :tabCodeList="tabCodeList"
            :set-up-list="setUpList"
            :getTemplateMethod="getTemplateMethod"
            ref="setUpForm"
          >
          </setUPForm>
        </div>
        <!-- 打印配置 -->
        <div class="print-set" v-show="menuSelected === 'vertical'">
          <!-- 左侧是否显示打印配置开关列 -->
          <div class="form-check">
            <div
              class="check-item"
              v-for="item in formData.form"
              :key="item.uuid"
            >
              {{ item.name }}
              <a-switch
                v-model="item.show"
                :checked-value="1"
                :unchecked-value="0"
              />
            </div>
          </div>
          <Form
            class="form"
            :setUpList="formData.form"
            :layout="rest"
            :regex="regex"
            v-show="menuSelected === 'vertical'"
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch, provide } from 'vue';
  import uniqueid from 'lodash.uniqueid';
  import clonedeep from 'lodash.clonedeep';
  import setUPForm from '@/components/dynamic-forms/set-up-form/index.vue';
  import Form from '@/components/dynamic-forms/rendering-form/form/index.vue';
  import regex from '@/utils/regex';

  // 保存方法
  const emit = defineEmits(['saveForm']);
  const props = withDefaults(
    //参数说明
    defineProps<{
      data: {
        id?: number;
        type: number; // 表单类型 代表需求、订单等各种表单类型
        name: string;
        form: any;
        print: any;
      };
    }>(),
    {}
  );

  const visible = ref(false);
  const getTemplateMethod = ref(2);
  const grandFatherFun1 = (value?: any) => {
    getTemplateMethod.value = value;
  };
  provide('TemplateMethod', grandFatherFun1);
  // 显示全屏弹框
  const fullScreen = () => {
    visible.value = true;
  };
  const goBack = () => {
    visible.value = false;
  };
  const rest = ref('vertical');
  const tabCodeList = reactive(['baseComponent', 'businessComponent']);
  const menuSelected = ref('horizontal');
  let setUpForm = ref();
  const menuItemClick = (key: any) => {
    menuSelected.value = key;
  };
  const formData = ref(clonedeep(props.data));
  // 2保存或新增（有id是编辑，无id是新增）1渲染表单
  const chagangetest = (type: number) => {
    formData.value.form = setUpForm.value.copySetUpList;
    if (type === 1) return; // 如果是渲染，则不读数据库
    // 把对象转成字符串，boolean转0/1
    formData.value.form.forEach((item: any) => {
      item.props = JSON.stringify(item.props);
      item.show = item.show ? 1 : 0;
      item.values = JSON.stringify(item.values);
    });
    emit('saveForm', formData.value);
    visible.value = false;
  };
  // const chagangetest = (type: number) => {
  //   formData.value.form = setUpForm.value.copySetUpList.map((item: any) => {
  //     return {
  //       ...item,
  //       props: JSON.stringify(item.props),
  //       required: item?.required ? 1 : 0,
  //       show: !!item.show,
  //       values: JSON.stringify(item.values),
  //     };
  //   });
  //   if (type !== 1) {
  //     emit('saveForm', formData.value);
  //     visible.value = false;
  //   }
  // };
  const setUpList = ref([
    {
      show: 1,
      componentType: 'TEXT',
      code: 'TEXT',
      props: { placeholder: '请输入文字' },
      name: '单行文本',
      required: false,
      span: 12,
      uuid: uniqueid(''),
    },
  ]);

  // 暴露方法给父组件
  defineExpose({ fullScreen });
  watch(props.data, (val: any) => {
    formData.value = clonedeep(val);
    // 直接讲组件暴露的变量进行赋值，达到动态渲染控件的目的
    setUpForm.value.copySetUpList = formData.value.form;
  });
</script>

<style scoped lang="less">
  .header {
    display: flex;
    border-bottom: 1px solid #eee;
    align-items: center;

    .form-name {
      font-size: 18px;
    }

    // background: rgba(61, 126, 255, 1);
    // color: white;
    .menu {
      flex: 1;
      text-align: center;
    }
  }

  .content {
    // height: calc(100vh - 200px);

    .main {
      // height: 100%;
      background: #eee;

      .print-set {
        display: flex;
        height: 100%;

        .form-check {
          width: 300px;
          background: white;
          // height: 100%;
          // margin: 16px 0;
          overflow: auto;

          .check-item {
            display: flex;
            justify-content: space-between;
            padding: 16px;
          }
        }

        .form {
          width: 700px;
          height: 1000px;
          overflow: auto;
          margin: 0 auto;
          padding: 16px;
          background: white;
        }
      }
    }
  }
</style>
